{% extends 'base.html' %}

{% block container %}
  <div id="map"></div>
  <script>
    var map;
    function initMap() {
      var bounds = new google.maps.LatLngBounds();
      var centroid = new google.maps.LatLng({{centroid[0]}}, {{centroid[1]}});
      map = new google.maps.Map(document.getElementById('map'), {
        center: centroid,
        zoom: 15
      });

     /*
      var centerpoint = new google.maps.Marker({
        position: centroid,
        map: map,
        label:'Centroid',
        title:""+centroid.lat()+", "+centroid.lng()+""
      });
      */
      var trilat = new google.maps.LatLng({{trilat[0]}}, {{trilat[1]}});
      bounds.extend(trilat);
      new google.maps.Marker({
        position: trilat,
        map: map,
        label:'Trilateration',
        title:""+trilat.lat()+", "+trilat.lng()+""
      });

      var point;
      var points = [];
      var opacity = 0.2
      {% for t in similar_towers %}
        // Don't display towers which have no GPS data attached
        if ({{t.lat}} != 0 && {{t.lon}} != 0) {
          point = new google.maps.LatLng({{t.lat}}, {{t.lon}});
          //new google.maps.Marker({position: point, map: map, title:""+point.lat()+", "+point.lng()+"" });
          points.push(point);
          new google.maps.Circle({
            strokeColor: '#00cccc',
            strokeOpacity: 0.1,
            strokeWeight: 2,
            fillColor: '#00cccc',
            fillOpacity: 0.1,
            map: map,
            center: point,
            radius: {{t.est_dist}}
          });
        }
      {% endfor %}
      for (let p of points) {
        bounds.extend(p);
      }
      map.fitBounds(bounds);
    }
  </script>

  <h2>Details</h2>
  <div class='bs-component table-responsive'>
    <table class="table table-striped">
      <tbody>
      {% for col in tower.params() %}
        <tr><th scope='row'>{{ col.replace('_', ' ').title() }}</th><td> {{ tower[col] }}</td></tr>
      {% endfor %}
      <tr><th scope='row'>Trilateration</th><td>{{trilat[0]}}, {{trilat[1]}}</td></tr>
      <tbody>
    </table>
  </div>

  <h2>{{num_towers}} Total Sightings for this Antenna</h2>
  <div class='bs-component table-responsive'>
    <table class="table table-hover table-striped data-table table-sm">
      <thead class="thead-light ">
      <tr>
          <th>Ⓐ</th>
          {% for col in showcols %}
            <th>{{ col }}</th>
          {% endfor %}
      </tr>
      <tbody id='hits'>
      {% for tower in similar_towers %}
        <tr>
            <td><a href="/detail/{{ tower.id }}">Ⓐ</a></td>
            {% for col in showcols %}
              <td>{{ tower[col] }}</td>
            {% endfor %}
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}
